/*
 *  主页渲染 
 *
 */

"use strict"; //严格模式

//主页
var indexAjax = $.ajax({
  type: "GET",
  url: "./json/data.json",
  dataType: "json",
  async: true,
  success: function (data) {

    /*城市*/
    $.each(data.region, function (i, region) {
      //用append()添加，如果用html()的话数据只加载一个
      $("#region").append('<div>' + region + '</div>');
    });

    /*网站导航*/
    var $siteMapBd = $("#siteMapBd");
    var theme = data.siteMapBd.theme;
    var characteristic = data.siteMapBd.characteristic;
    var ali = data.siteMapBd.ali;
    var marvellous = data.siteMapBd.marvellous;
    //主题市场
    var themeLi = "";
    $.each(theme.themeData, function (i, data) {
      if (data.label == "new") {
        themeLi += '<li><a href="' + data.url + '">' + data.title + '<i class="new"></i></a></li>';
      } else if (data.label == "hot") {
        themeLi += '<li><a href="' + data.url + '">' + data.title + '<i class="hot"></i></a></li>';
      } else {
        themeLi += '<li><a href="' + data.url + '">' + data.title + '</a></li>';
      }
    });
    $siteMapBd.append(
      '<li class="inside theme l">' +
      '<h4>' + theme.title + '</h4>' +
      '<ul>' + themeLi + '</ul>' +
      '</li>'
    );
    //特色市场
    var characteristiLi = "";
    $.each(characteristic.characteristiDdata, function (i, data) {
      if (data.label == "new") {
        characteristiLi += '<li><a href="' + data.url + '">' + data.title + '<i class="new"></i></a></li>';
      } else if (data.label == "hot") {
        characteristiLi += '<li><a href="' + data.url + '">' + data.title + '<i class="hot"></i></a></li>';
      } else {
        characteristiLi += '<li><a href="' + data.url + '">' + data.title + '</a></li>';
      }
    });
    $siteMapBd.append(
      '<li class="inside characteristic l">' +
      '<h4>' + characteristic.title + '</h4>' +
      '<ul>' + characteristiLi + '</ul>' +
      '</li>'
    );
    //阿里APP
    var aliLi = "";
    $.each(ali.aliData, function (i, data) {
      if (data.label == "new") {
        aliLi += '<li><a href="' + data.url + '">' + data.title + '<i class="new"></i></a></li>';
      } else if (data.label == "hot") {
        aliLi += '<li><a href="' + data.url + '">' + data.title + '<i class="hot"></i></a></li>';
      } else {
        aliLi += '<li><a href="' + data.url + '">' + data.title + '</a></li>';
      }
    });
    $siteMapBd.append(
      '<li class="inside ali l">' +
      '<h4>' + ali.title + '</h4>' +
      '<ul>' + aliLi + '</ul>' +
      '</li>'
    );
    //精彩推荐集
    var marvellousLi = "";
    $.each(marvellous.marvellousData, function (i, data) {
      if (data.label == "new") {
        marvellousLi += '<li><a href="' + data.url + '">' + data.title + '<i class="new"></i></a></li>';
      } else if (data.label == "hot") {
        marvellousLi += '<li><a href="' + data.url + '">' + data.title + '<i class="hot"></i></a></li>';
      } else {
        marvellousLi += '<li><a href="' + data.url + '">' + data.title + '</a></li>';
      }
    });
    $siteMapBd.append(
      '<li class="inside marvellous l">' +
      '<h4>' + marvellous.title + '</h4>' +
      '<ul>' + marvellousLi + '</ul>' +
      '</li>'
    );

    /*搜索推荐*/
    var searchRecommendation = data.search.searchRecommendation;
    var recommendationA = "";
    var recommendationA1 = "";
    var $searchTitle = $("#searchTitle");
    $.each(searchRecommendation, function (i, item) {
      if (i < 12) {
        if (item.className == "h") {
          recommendationA += '<a href="' + item.url + '" class="' + item.className + '">' + item.title + '</a>'
        } else {
          recommendationA += '<a href="' + item.url + '">' + item.title + '</a>'
        }
      } else if (i > 12) {
        if (item.className == "h") {
          recommendationA1 += '<a href="' + item.url + '" class="' + item.className + '">' + item.title + '</a>'
        } else {
          recommendationA1 += '<a href="' + item.url + '">' + item.title + '</a>'
        }
      }

    });
    $("#search-bottom-lines").append(
      '<div>' + recommendationA + '</div>' +
      '<div>' + recommendationA1 + '</div>'
    );
    //搜索框推荐（随机显示）
    var rand = Math.floor(Math.random() * searchRecommendation.length);
    $searchTitle.html(searchRecommendation[rand].title);

    /*classification*/
    var serviceFloat = data.serviceFloat;
    var serviceFloatDiv = ""
    $.each(serviceFloat, function (i, item) {
      //serviceData
      var serviceDataDiv = "";
      for (var i of item.serviceData) {

        var subsetA = "";
        for (var j of i.subset) {
          if (j.className == "h") {
            subsetA += '<a href="' + j.url + '" class="' + j.className + '">' + j.title + '</a>';
          } else {
            subsetA += '<a href="' + j.url + '">' + j.title + '</a>';
          }
        }
        serviceDataDiv +=
          '<div class="service-panel">' +
          '<h5>' +
          '<a href="' + i.url + '" class="title l">' + i.title + '</a>' +
          '<a href="' + i.MoreUrl + '" class="gengduo r">更多<svg class="icon icongengduo1"><use xlink:href="#icongengduo1"></use></svg></a>' +
          '</h5>' +
          '<p>' + subsetA + '</p>' +
          '</div>';
      }
      //guessYouLikeIt
      var guessYouLikeIt = item.guessYouLikeIt;
      var guessYouLikeItBox = "";
      var guessYouLikeItA = "";
      for (var i of guessYouLikeIt.subset) {
        guessYouLikeItA +=
          '<div>' +
          '<a href="' + i.url + '" class="like-commodity">' +
          '<div class="img a-all"><img src="' + i.img + '" title="' + i.title + '" width="100%"></div>' +
          '<h5 class="a-all">' + i.title + '</h5>' +
          '</a>' +
          '</div>';
      }
      guessYouLikeItBox += '<h3>' + guessYouLikeIt.title + '</h3>' + guessYouLikeItA;
      //集合
      serviceFloatDiv =
        '<div class="box">' +
        '<div class="service-float-item l">' + serviceDataDiv + '</div>' +
        '<div class="service-float-like r">' + guessYouLikeItBox + '</div>' +
        '</div>';
      $("#service-float").append(serviceFloatDiv);

    });

    /*轮播*/
    //promo
    var promo = data.lunbo.promo;
    var promoImg = "";
    var promoNav = ""
    var $promo = $("#promo");
    for (var i of promo) {
      promoImg += '<a href="' + i.url + '"><img src="' + i.img + '"></a>';
      promoNav += '<li></li>';
    }
    $promo.append(
      '<div class="promo-img">' +
      promoImg +
      '<a href="' + promo[0].url + '"><img src="' + promo[0].img + '"></a>' +
      '</div>' +
      '<ul class="promo-nav">' + promoNav + '</ul>'
    );
    $promo.find(".promo-nav li").eq(0).attr('class', 'selected');
    //tmall
    var tmall = data.lunbo.tmall;
    var $tmall = $("#tmall");
    var tmallNav = '';
    var tmallLunbo = '';
    for (var i of tmall) {
      tmallNav += '<li></li>';
      tmallLunbo +=
        '<div>' +
        '<a href="' + i.url1 + '"><img src="' + i.img1 + '"></a>' +
        '<a href="' + i.url2 + '"><img src="' + i.img2 + '"></a>' +
        '</div>';
    }
    $tmall.find('.tmall-hd').append(
      '<ul class="tmall-nav">' +
      tmallNav +
      '</ul>'
    );
    $tmall.find('.tmall-lunbo').append(
      '<div class="tmall-img">' +
      tmallLunbo +
      '<div>' +
      '<a href="' + tmall[0].url1 + '"><img src="' + tmall[0].img1 + '"></a>' +
      '<a href="' + tmall[0].url2 + '"><img src="' + tmall[0].img2 + '"></a>' +
      '</div>' +
      '</div>'
    );
    $tmall.find(".tmall-nav li").eq(0).attr('class', 'selected');

    /*广告栏advertisingColumn*/
    var advertisingColumn = data.advertisingColumn;
    var $advertisingColumn = $("#advertisingColumn");
    $advertisingColumn.find(".hb-top").append(
      '<a href="' + advertisingColumn.top.url + '">' +
      '<img src="' + advertisingColumn.top.img + '" alt="焦点图">' +
      '</a>'
    );
    $advertisingColumn.find(".hb-bottom").append(
      '<a href="' + advertisingColumn.bottom.url + '">' +
      '<img src="' + advertisingColumn.bottom.img + '" alt="焦点图">' +
      '</a>'
    );

    /*headline*/
    var headline = data.headline;
    var $headlineMore = $("#headlineMore")
    //动态更改href
    $headlineMore.attr('href', headline.moreUrl);
    var $headlineDd = $("#headline-bd-box");
    var headlineDdDiv = "";
    for (var i of headline.headlineBd) {
      headlineDdDiv +=
        '<li>' +
        '<a href="' + i.url + '">' +
        '<img src="' + i.img + '" alt="新闻图片">' +
        '<h4>' + i.title + '</h4>' +
        '<p>' + i.text + '</p>' +
        '</a>' +
        '</li>'
    }
    $headlineDd.append(headlineDdDiv);

    /* notice */
    var $noticeBd = $("#notice-bd");
    var Notice = data.Notice;
    //notice
    var noticeLi = "";
    for (var i of Notice.notice) {
      if (i.hot == "h") {
        noticeLi += '<li><a href="' + i.url + '" target="_blank" class="h">' + i.title + '</a></li>';
      } else {
        noticeLi += '<li><a href="' + i.url + '" target="_blank">' + i.title + '</a></li>';
      }
    }
    var noticeUl =
      '<ul class="mod first">' +
      noticeLi +
      '</ul>';
    //rule
    var ruleLi = "";
    for (var i of Notice.rule) {
      if (i.hot == "h") {
        ruleLi += '<li><a href="' + i.url + '" target="_blank" class="h">' + i.title + '</a></li>';
      } else {
        ruleLi += '<li><a href="' + i.url + '" target="_blank">' + i.title + '</a></li>';
      }
    }
    var ruleUl =
      '<ul class="mod hide">' +
      ruleLi +
      '</ul>';
    //forum
    var forumLi = "";
    for (var i of Notice.forum) {
      if (i.hot == "h") {
        forumLi += '<li><a href="' + i.url + '" target="_blank" class="h">' + i.title + '</a></li>';
      } else {
        forumLi += '<li><a href="' + i.url + '" target="_blank">' + i.title + '</a></li>';
      }
    }
    var forumUl =
      '<ul class="mod hide">' +
      forumLi +
      '</ul>';
    //security
    var securityLi = "";
    for (var i of Notice.security) {
      if (i.hot == "h") {
        securityLi += '<li><a href="' + i.url + '" target="_blank" class="h">' + i.title + '</a></li>';
      } else {
        securityLi += '<li><a href="' + i.url + '" target="_blank">' + i.title + '</a></li>';
      }
    }
    var securityUl =
      '<ul class="mod hide">' +
      securityLi +
      '</ul>';
    //technology
    var technologyLi = "";
    for (var i of Notice.technology) {
      if (i.hot == "h") {
        technologyLi += '<li><a href="' + i.url + '" target="_blank" class="h">' + i.title + '</a></li>';
      } else {
        technologyLi += '<li><a href="' + i.url + '" target="_blank">' + i.title + '</a></li>';
      }
    }
    var technologyUl =
      '<ul class="mod hide">' +
      technologyLi +
      '</ul>';
    //集合
    $noticeBd.append(
      noticeUl +
      ruleUl +
      forumUl +
      securityUl +
      technologyUl
    );

    /*车险下拉*/
    //车险城市
    var carInsurance_city = data.CarInsurance.carInsurance_city;
    var carInsurance_drop_1Li = '';
    for (var i in carInsurance_city) {
      if (i == 0) {
        carInsurance_drop_1Li += '<li class="selected">' + carInsurance_city[i] + '</li>';
      } else {
        carInsurance_drop_1Li += '<li>' + carInsurance_city[i] + '</li>';
      }
    }
    var carInsurance_drop_1 =
      '<ul class="conve-drop carInsurance_drop_1" id="carInsurance_drop_1">' +
      carInsurance_drop_1Li +
      '</ul>';

    //车险种类
    var typeofinsurance = data.CarInsurance.typeofinsurance;
    var carInsurance_drop_2Li = '';
    for (var i in typeofinsurance) {
      if (i == 0) {
        carInsurance_drop_2Li += '<li class="selected">' + typeofinsurance[i] + '</li>';
      } else {
        carInsurance_drop_2Li += '<li>' + typeofinsurance[i] + '</li>';
      }
    }
    var carInsurance_drop_2 =
      '<ul class="conve-drop carInsurance_drop_2" id="carInsurance_drop_2">' +
      carInsurance_drop_2Li +
      '</ul>';

    //意外险类型
    var accidentInsurance_type = data.CarInsurance.accidentInsurance_type;
    var accidentInsurance_drop_1Li = '';
    for (var i in accidentInsurance_type) {
      if (i == 0) {
        accidentInsurance_drop_1Li += '<li class="selected">' + accidentInsurance_type[i] + '</li>';
      } else {
        accidentInsurance_drop_1Li += '<li>' + accidentInsurance_type[i] + '</li>';
      }
    }
    var accidentInsurance_drop_1 =
      '<ul class="conve-drop accidentInsurance_drop_1" id="accidentInsurance_drop_1">' +
      accidentInsurance_drop_1Li +
      '</ul>';

    //意外险时间
    var accidentInsurance_time = data.CarInsurance.accidentInsurance_time;
    var accidentInsurance_drop_2Li = '';
    for (var i in accidentInsurance_time) {
      if (i == 0) {
        accidentInsurance_drop_2Li += '<li class="selected">' + accidentInsurance_time[i] + '</li>';
      } else {
        accidentInsurance_drop_2Li += '<li>' + accidentInsurance_time[i] + '</li>';
      }
    }
    var accidentInsurance_drop_2 =
      '<ul class="conve-drop accidentInsurance_drop_2" id="accidentInsurance_drop_2">' +
      accidentInsurance_drop_2Li +
      '</ul>';

    //健康险类型
    var healthInsurance_type = data.CarInsurance.healthInsurance_type;
    var healthInsurance_drop_1Li = '';
    for (var i in healthInsurance_type) {
      if (i == 0) {
        healthInsurance_drop_1Li += '<li class="selected">' + healthInsurance_type[i] + '</li>';
      } else {
        healthInsurance_drop_1Li += '<li>' + healthInsurance_type[i] + '</li>';
      }
    }
    var healthInsurance_drop_1 =
      '<ul class="conve-drop healthInsurance_drop_1" id="healthInsurance_drop_1">' +
      healthInsurance_drop_1Li +
      '</ul>';

    //健康险产品
    var healthInsurance_product = data.CarInsurance.healthInsurance_product;
    var healthInsurance_drop_2Li = '';
    for (var i in healthInsurance_product) {
      if (i == 0) {
        healthInsurance_drop_2Li += '<li class="selected">' + healthInsurance_product[i] + '</li>';
      } else {
        healthInsurance_drop_2Li += '<li>' + healthInsurance_product[i] + '</li>';
      }
    }
    var healthInsurance_drop_2 =
      '<ul class="conve-drop healthInsurance_drop_2" id="healthInsurance_drop_2">' +
      healthInsurance_drop_2Li +
      '</ul>';

    //旅行险
    //地区
    var travelInsurance_city = data.CarInsurance.travelInsurance_city;
    var travelInsurance_drop_1Li = '';
    for (var i in travelInsurance_city) {
      if (i == 0) {
        travelInsurance_drop_1Li += '<li class="selected">' + travelInsurance_city[i] + '</li>';
      } else {
        travelInsurance_drop_1Li += '<li>' + travelInsurance_city[i] + '</li>';
      }
    }
    var travelInsurance_drop_1 =
      '<ul class="conve-drop travelInsurance_drop_1" id="travelInsurance_drop_1">' +
      travelInsurance_drop_1Li +
      '</ul>';

    //天数
    var travelInsurance_time = data.CarInsurance.travelInsurance_time;
    var travelInsurance_drop_2Li = '';
    for (var i in travelInsurance_time) {
      if (i == 0) {
        travelInsurance_drop_2Li += '<li class="selected">' + travelInsurance_time[i] + '</li>';
      } else {
        travelInsurance_drop_2Li += '<li>' + travelInsurance_time[i] + '</li>';
      }
    }
    var travelInsurance_drop_2 =
      '<ul class="conve-drop travelInsurance_drop_2" id="travelInsurance_drop_2">' +
      travelInsurance_drop_2Li +
      '</ul>';

    //财产险
    var propertyInsurance_type = data.CarInsurance.propertyInsurance_type;
    var propertyInsurance_drop_Li = '';
    for (var i in propertyInsurance_type) {
      if (i == 0) {
        propertyInsurance_drop_Li += '<li class="selected">' + propertyInsurance_type[i] + '</li>';
      } else {
        propertyInsurance_drop_Li += '<li>' + propertyInsurance_type[i] + '</li>';
      }
    }
    var propertyInsurance_drop =
      '<ul class="conve-drop propertyInsurance_drop" id="propertyInsurance_drop">' +
      propertyInsurance_drop_Li +
      '</ul>';

    //集合
    $('.J_Conve_Insurance .plugin').append(
      carInsurance_drop_1,
      carInsurance_drop_2,
      accidentInsurance_drop_1,
      accidentInsurance_drop_2,
      healthInsurance_drop_1,
      healthInsurance_drop_2,
      travelInsurance_drop_1,
      travelInsurance_drop_2,
      propertyInsurance_drop
    );

    //阿里APP
    var aliApp = data.aliApp;
    var $tbApp = $("#tbApp");
    var tbAppli = ''

    for (var i of aliApp) {
      tbAppli +=
        '<li class="nav ' + 'apps-' + i.id + '">' +
        '<a href="' + i.url + '"><img src="' + i.iconImg + '" alt="' + i.iconAlt + '"></a>' +
        '<div class="app-qr">' +
        '<img src="' + i.QRcode + '" alt="' + i.QRcodeAlt + '">' +
        '<p>' + i.title + '</p>' +
        '</div>' +
        '</li>'
    }

    $tbApp.append(
      '<ul class="tb-app-nav">' +
      tbAppli +
      '</ul>'
    );

    //底部
    var $protection = $("#protection");
    var $novicesOnTheRoad = $("#novicesOnTheRoad");
    var $paymentMethod = $("#paymentMethod");
    var $taobaoFeatures = $("#taobaoFeatures");

    var protectionLi = '';
    for (var i of data.helper.protection) {
      protectionLi += '<li><a href="' + i.url + '">' + i.title + '</a></li>';
    }
    $protection.append(protectionLi);

    var novicesOnTheRoadLi = '';
    for (var i of data.helper.novicesOnTheRoad) {
      novicesOnTheRoadLi += '<li><a href="' + i.url + '">' + i.title + '</a></li>';
    }
    $novicesOnTheRoad.append(novicesOnTheRoadLi);

    var paymentMethodLi = '';
    for (var i of data.helper.paymentMethod) {
      paymentMethodLi += '<li><a href="' + i.url + '">' + i.title + '</a></li>';
    }
    $paymentMethod.append(paymentMethodLi);

    var taobaoFeaturesLi = '';
    for (var i of data.helper.taobaoFeatures) {
      taobaoFeaturesLi += '<li><a href="' + i.url + '">' + i.title + '</a></li>';
    }
    $taobaoFeatures.append(taobaoFeaturesLi);

    //页脚
    var $friendlyLink = $("#friendlyLink");
    var friendlyLinkBox = "";

    for (var i of data.friendlyLink) {
      friendlyLinkBox += '<span><a href="' + i.url + '">' + i.title + '</a></span>'
    };
    $friendlyLink.append(friendlyLinkBox);

  }
});